<template>
  <div>
    <div>
    <swiper :lunbotu="lunbotu" :isfull="true"></swiper>
    <div class="content">
      <router-link to="/goodslist" tag="div">
        <img src="../../static/logo.png">
        <p>商品分类</p>
      </router-link>
      <div>
        <img src="../../static/logo.png">
        <p>新品</p>
      </div>
      <router-link to="/login" tag="div">
        <img src="../../static/logo.png">
        <p>登录</p>
      </router-link>
      <div>
        <img src="../../static/logo.png">
        <p>购物车</p>
      </div>
      <div>
        <img src="../../static/logo.png">
        <p>手机</p>
      </div>
      <div>
        <img src="../../static/logo.png">
        <p>新品</p>
      </div>
    </div>
    <!-- 卡片广告 -->
      <div class="card">
        <!-- 轮播广告 -->
        <div class="banner">
          <ul ref="con1" :class="{anim:animate==true}" >
            <li v-for="(item,i) in items" :key="i">{{item.name}}</li>
          </ul>
        </div>
        <img src="../../static/logo.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import swiper from './public/swiper.vue'
    export default {
      data(){
        return {
          value: '',
          flag: false,
           animate: false,
          martop: false,
          items: [  //消息列表
          {name: '马云'},
          {name: '雷军'},
          {name: '王世宏'},
          {name: '凑尼玛'},
        ],
        timer: '',
        lunbotu: [], //存放轮播图数据
        }
      },
      mounted(){
        window.addEventListener('scroll',this.srollHand)
      },
      created(){
        this.timer = setInterval(this.scroll,1000),
        this.getlunbotu()
      },
      destroyed(){
        clearInterval(this.timer)
      },
      components: {
        swiper
      },
      methods: {
        getlunbotu(){ //获取轮播图数据的方法
            this.$http.get('api/getlunbo').then(result=>{
                if(result.body.status == 0){
                  this.lunbotu = result.body.message
                }
               
            })

        },
       
       scroll(){
       let con1 = this.$refs.con1  //通过标记ref获取到元素
       
      con1.style.marginTop = '-30px'
       this.animate = !this.animate
       var that = this //保存好this地指向
       setTimeout(function(){
         that.items.push(that.items[0])
         that.items.shift()
        con1.style.marginTop = '0px'
         that.animate = !that.animate
       },500)
     }
      }
    }
</script>

<style scoped>


.top {
  height: 60px;
  background-color: pink;
  width: 100%;
  overflow: hidden;
}
.top .left{
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background-color: purple;
  padding-right: 80px;
}
.top .right {
  padding: 0 10px;
  height: 50px;
  background-color: green;
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 10px
}
.acc{
  margin-top: -30px;
}

.body {
  padding: 60px 10px 0;

}
.pd{
  padding: 0 10px
}
.content {
  height: 220px;
  margin: 10px 0;
}
.content div {
  width: 31%;
  height: 48%;
  border: 1px solid #ccc;
  display: inline-block;
  overflow: hidden;
  text-align: center
}
.content div img {
  height: 70%;
}
.card {
  width: 100%;
  height: 200px;
  background-color: skyblue;
  margin-bottom: 10px;
  text-align: center
}
.card img {
  height: 80%
} 
.banner {
  width: 100%;
  height: 32px;
  line-height: 30px;
  background-color: #fff;
  border: 1px solid #000;
  overflow: hidden;
}
.anim {
  transition: all 0.5s
}
</style>

